<template>
  <normal-layout page-index="6-5">
    <div class="bodyDiv">
      <div class="left">
        <el-card style="width: 100%;height: 240px">
          <div slot="header" style="display: flex; justify-content: space-between">
            <h3>数据统计</h3>
          </div>
          <div style="display: flex; width: 100%;justify-content: space-around;margin-top: 10px">
            <div style=" ">
              <h3>总数</h3>
              <h1 style="color: #000000;font-size: 70px;">{{current}}</h1>
            </div>
            <div style="">
              <h3>运行</h3>
              <h1 style="color: rgba(183,235,143,0.83);font-size: 70px;">{{current}}</h1>
            </div>
            <div style="">
              <h3>停用</h3>
              <h1 style="color: #409eff;font-size: 70px;">{{current}}</h1>
            </div>
          </div>
        </el-card>
        <el-card style="margin-top: 10px">
          <!--          <div style="width: 100%;justify-content: center">
                      <div>
                        <p style="font-weight: bold;width: 100%;white-space: nowrap">在线离线统计:</p>
                        <el-divider style="width: 100%"></el-divider>
                      </div>
                    </div>-->
          <h4 style="margin-left: 50px">运行比例统计</h4>
          <annual-pie :test-data="pieData" style="height: 250px;width:100%;margin-top: -30px;margin-bottom: -30px"></annual-pie>
        </el-card>
        <el-card style="margin-top: 10px">
          <h4 style="margin-left: 50px">每日变化折线</h4>
          <line-histogram style="width: 100%;height: 350px;margin-bottom: -40px;margin-top: 10px"></line-histogram>
        </el-card>
      </div>
      <div class="right">
        <el-card style="height: 100%">
          <div slot="header" style="display: flex; justify-content: space-between">
            <h3>设备管理</h3>
          </div>
          <div style="display: flex; justify-content: space-between; padding: 10px;">
            <div>
              <el-select placeholder="选择设备状态"></el-select>
              <el-select placeholder="选择设备类型"></el-select>
            </div>
              <el-button type="primary" icon="el-icon-arrow-right">检索</el-button>
          </div>
          <el-table :data="testData"
                    style="width: 100%;height: 700px;"
                    stripe
                    highlight-current-row
                    ref="tableList">
            <el-table-column type="expand" label="展开" width="50px">
              <template slot-scope="props">
                <div style="width: 100%;">
                  <!--电量、运行时间、运行次数、停用次数、上次停用时间...-->
                  <div style="display: flex;padding: 20px">
                    <div style="width: 50%">
                      <p style="font-weight: bold;">电量：</p>
                      <el-progress type="dashboard" :percentage="props.row.percentage" :color="colors" style="margin-left: 30px"></el-progress>
                    </div>

                    <div style="width: 50%">
                      <p style="font-weight: bold">运行时间：</p>
                      <div style="display: flex">
                        <h1 style="color: #f23855;font-size: 70px;font-weight: lighter;margin-top: 20px">
                          {{current}}
                          <span style="font-size: 20px;font-weight: normal;color: black">天</span>
                          {{current}}
                          <span style="font-size: 20px;font-weight: normal;color: black">小时</span>
                          {{current}}
                          <span style="font-size: 20px;font-weight: normal;color: black">分</span>
                        </h1>
                      </div>
                    </div>
                  </div>


                  <div style="width: 100%; display: flex; padding: 20px">
                  <div style="width: 50%">
                    <p style="font-weight: bold;">运行次数：</p>
                    <h1 style="color: #0085f2;font-size: 70px;font-weight: lighter;margin-top: 20px">
                      {{current}}
                      <span style="font-size: 20px;font-weight: normal;color: black">次</span>
                    </h1>
                  </div>
                  <div style="width: 50%">
                    <p style="font-weight: bold;">停用次数：</p>
                    <h1 style="color: #c500f2;font-size: 70px;font-weight: lighter;margin-top: 20px">
                      {{current}}
                      <span style="font-size: 20px;font-weight: normal;color: black">次</span>
                    </h1>
                  </div>
                </div>

                  <div style="width: 100%; display: flex; padding: 20px">
                    <div style="width: 100%">
                      <p style="font-weight: bold;">上次停用时间：</p>
                      <el-time-picker style="margin-top: 20px" disabled></el-time-picker>
                    </div>
                  </div>

                </div>
              </template>
            </el-table-column>
            <el-table-column label="序号" prop="id"></el-table-column>
            <el-table-column label="设备类型" prop="type"></el-table-column>
            <el-table-column label="设备编号" prop="deviceId"></el-table-column>
            <el-table-column label="位置" prop="position"></el-table-column>
            <el-table-column label="操作" min-width="150px">
              <template slot-scope="scope">
                  <el-button type="primary" size="small" @click="deviceVisible=true">查看详情</el-button>
                  <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination></el-pagination>
        </el-card>
      </div>

      <el-dialog
        title="修改设备信息"
        :modal-append-to-body="false"
        :visible.sync="deviceVisible"
        width="30%">
        <el-form>
          <el-form-item label="设备名称:" style="margin-left: 8%">
            <el-input style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="设备编号:" style="margin-left: 8%">
            <el-input style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="设备位置:" style="margin-left: 8%">
            <el-input style="width: 80%"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button-group>
            <el-button @click="deviceVisible = false">取 消</el-button>
            <el-button type="primary" @click="deviceVisible = false">确 定</el-button>
          </el-button-group>
        </div>
      </el-dialog>
    </div>
  </normal-layout>
</template>

<script>
  import NormalLayout from "../../components/NormalLayout";
  import LineHistogram from "../../components/Charts/LineHistogram";
  import AnnualPie from "../../components/Charts/AnnualPie";
  export default {
    name: "Equipment",
    components:{AnnualPie, LineHistogram, NormalLayout},
    data(){
      return{
        colors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],
        current:39,
        online:23,
        offline:16,

        deviceVisible:false,

        testData:[
          {
            class:'货车',
            type:'VS-23',
            id:'113565',
            position:'风动机',
            deviceId: 'AD-19681',
          },
          {
            class:'货车',
            type:'BT-19',
            id:'156652',
            position:'发电机',
            deviceId: 'NE-18451',
          },
          {
            class:'货车',
            type:'BD-35',
            id:'112568',
            position:'机舱',
            deviceId: 'FG-13654',
          },
        ],
        testDat0a:[
          {
            id:'1919810',
            type:'装甲车',
            deviceId:'114514',
            position:'底盘',
            percentage:50,
          },
          {
            id:'1919810',
            type:'装甲车',
            deviceId:'114514',
            position:'底盘',
            percentage:50,
          },
          {
            id:'1919810',
            type:'装甲车',
            deviceId:'114514',
            position:'底盘',
            percentage:50,
          }
        ]
      }
    }
  }
</script>

<style scoped>
  .bodyDiv{
    margin: 10px;
    display: flex;
  }
  .left{
    width: 55%;
  }
  .right{
    width: 100%;
    margin-left: 10px;
  }
</style>
